import React, { PureComponent, Fragment } from 'react';
import styles from './homePage.less';
import { Row, Col, Form, Empty, Carousel, Typography, Input, Button,message } from 'antd';
import { connect } from 'dva';

import party from './../../images/union.png';
import union_top from './../../images/union_top.jpg';
import union_right from './../../images/union_right.jpg';
import union_middle from './../../images/union_middle.jpg';
import link1 from './../../images/link1.png';
import link2 from './../../images/link2.png';
import link3 from './../../images/link3.png';
import link4 from './../../images/link4.png';
import link5 from './../../images/link5.png';
import request from '@/utils/request';

const { TextArea } = Input;
import MyPagination from '@/components/MyPagination';

const FormItem = Form.Item;
const { Paragraph } = Typography;

@connect(({ devices, loading }) => ({
  devices,
}))
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.scrollInterval = '';
    this.state = {
      boxH: 0,
      listMarginTop: '0',
      animate: false,
      auto: true,
      readList: localStorage.getItem('readList') ? JSON.parse(localStorage.getItem('readList')) : [],
      sylb: [],
      ghdt: [],
      zcfg: [],
      zgpx: [],
      lmgj: [],
      dxjy: [],
      mzgl: [],
      ghdt2: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [],
      },
      zcfg2: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [],
      },
      zgpx2: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [],
      },
      lmgj2: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [],
      },
      dxjy2: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [],
      },
      mzgl2: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [],
      },
      activeKey: 1,
      tabs: [{ key: 1, name: '首页' }, { key: 2, name: '组织结构' }, { key: 3, name: '工会动态' }, { key: 4, name: '政策法规' },
        { key: 5, name: '职工培训' }, { key: 6, name: '劳模工匠' }, { key: 7, name: '典型经验' }, { key: 8, name: '民主管理' }
        // , { key: 9, name: '意见征集' }
      ],
      counters:0,
    }
    ;
  }


  componentDidMount() {
    request(`/counters/union_homepage`, {
      method: 'GET',
      params:{
        company_id:'647076256457691137'
      }
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          counters:response.data.data.count
        });
      }
    });
    const that = this;
    let articleMap = ['', 'sylb', 'ghdt', 'zcfg', 'zgpx', 'lmgj', 'dxjy', 'mzgl'];
    request(`/articles`, {
      method: 'GET',
      params: {
        order_direction: 'desc',
        type: 31,
        per_page: 10,
        company_id:'647076256457691137'
      },
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          [articleMap[1]]: response.data.data,
        });
      }
    });
    request(`/articles`, {
      method: 'GET',
      params: {
        order_direction: 'desc',
        type: 32,
        per_page: 30,
        company_id:'647076256457691137'
      },
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          [articleMap[2]]: response.data.data,
        });
      }
    });
    request(`/articles`, {
      method: 'GET',
      params: {
        order_direction: 'desc',
        type: 33,
        per_page: 10,
        company_id:'647076256457691137'
      },
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          [articleMap[3]]: response.data.data,
        });
      }
    });
    request(`/articles`, {
      method: 'GET',
      params: {
        order_direction: 'desc',
        type: 34,
        per_page: 10,
        company_id:'647076256457691137'
      },
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          [articleMap[4]]: response.data.data,
        });
      }
    });
    request(`/articles`, {
      method: 'GET',
      params: {
        order_direction: 'desc',
        type: 35,
        per_page: 10,
        company_id:'647076256457691137'
      },
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          [articleMap[5]]: response.data.data,
        });
      }
    });
    request(`/articles`, {
      method: 'GET',
      params: {
        order_direction: 'desc',
        type: 36,
        per_page: 10,
        company_id:'647076256457691137'
      },
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          [articleMap[6]]: response.data.data,
        });
      }
    });
    request(`/articles`, {
      method: 'GET',
      params: {
        order_direction: 'desc',
        type: 37,
        per_page: 10,
        company_id:'647076256457691137'
      },
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          [articleMap[7]]: response.data.data,
        });
      }
    });

  }

  handleSearch = (values, cb) => {
    const that = this;
    let articleMap = {
      32: 'ghdt2',
      33: 'zcfg2',
      34: 'zgpx2',
      35: 'lmgj2',
      36: 'dxjy2',
      37: 'mzgl2',
    };
    request(`/articles`, {
      method: 'GET',
      params: {
        ...values,
        order_direction: 'desc',
      },
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          [articleMap[values.type]]: {
            data: response.data.data,
            meta: response.data.meta,
          },
        });
      }
    });
  };
  saveRead = (item) => {
    if (this.state.readList.indexOf(item.id) < 0) {
      let readList = [...this.state.readList];
      readList.push(item.id);
      const that = this;
      setTimeout(function() {
        that.setState({
          readList: readList,
        }, function() {
          localStorage.setItem('readList', JSON.stringify(that.state.readList));
        });
      }, 0);


    }
  };

  render() {
    const username = sessionStorage.getItem('username');
    const { dispatch } = this.props;
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 },
      },
    };

    const { getFieldDecorator } = this.props.form;
    const pathname = this.props.history.location.pathname;
    let regex = /(<([^>]+)>)/ig;
    return <div style={{
      width: '100%',
      background: '#c30000',
      minHeight: `${pathname === '/labour_union_homepage' ? '100vh' : 'calc(100vh - 98px)'}`,
    }}>
      <div

        style={{
          background: '#fff',
          verflow: 'auto',
          position: 'relative',
          maxWidth: 1100,
          margin: '0 auto',
          paddingBottom: '16px',
        }}>
        {pathname === '/labour_union_homepage' ? '' : <h3 onClick={() => {
          window.open(`http://${window.location.host}/labour_union_homepage`);
        }} style={{
          textAlign: 'right',
          cursor: 'pointer',
          color: '#fff',
          position: 'absolute',
          right: '25px',
          top: '20px',
          fontWeight: 'bold',
        }}>新窗口打开</h3>}
        <div>
          <img style={{ width: '100%', height: 'auto' }} src={union_top} alt=""/>
        </div>
        <div className={styles.custom_tabs} style={{ background: '#c30000' }}>
          {this.state.tabs.map((item, index) => {
            return <div onClick={() => {
              this.setState({
                activeKey: item.key,
              });
              let articleMap = ['', '', 32, 33, 34, 35, 36, 37, ''];
              if (articleMap[Number(item.key) - 1]) {
                this.handleSearch({
                  type: articleMap[Number(item.key) - 1],
                  page: 1,
                  per_page: 30,
                });
              }

            }} key={index} className={styles.custom_tabs_item} style={{
              background: this.state.activeKey === item.key ?
                '#ff0f0f' : '#c30000',
            }}>{item.name}</div>;
          })}
        </div>

        {
          this.state.activeKey === 1 &&
          <div>
            <div>
              {this.state.ghdt.map((item, index) => {
                if (index === 0) {

                  return <div key={index} style={{ padding: '15px 20px' }}>
                    <h3 onClick={() => {
                      this.saveRead(item);
                      window.open(`http://${window.location.host}/union_article/${item.id}`);
                    }} style={{
                      cursor: 'pointer',
                      textAlign: 'center',
                      fontWeight: 'bold',
                      fontSize: '26px',
                      marginBottom: '10px',
                      marginTop: '10px',
                      color: this.state.readList.indexOf(item.id) >= 0 ? 'rgb(117 28 199)' : '',
                    }}>{item.title}</h3>
                    <Paragraph ellipsis={{ rows: 2 }} style={{ marginBottom: '0px !important', textIndent: '2em' }}>
                      {item.content.replace(regex, '')}
                    </Paragraph>
                  </div>;
                } else {
                  return '';
                }
              })}
            </div>
            <div style={{ padding: '16px', paddingTop: '0' }}>
              <Row gutter={16}>
                <Col className="gutter-row" span={12}>
                  <div className={` ${styles.home_info_box} ${styles.home_info_box2}`}>
                    {
                      this.state.sylb.length !== 0 &&
                      <Carousel autoplay={true} effect={'fade'}>
                        {this.state.sylb.map((item, index) => {
                          if (index < 5) {
                            return <div key={index} onClick={() => {

                            }} className={styles.carousel_item2} style={{ height: '334px' }}>
                              <img onClick={() => {
                                window.open(`http://${window.location.host}/union_article/${item.id}`);
                              }} className={styles.carousel_img}
                                   src={item.cover_image_path} alt=""/>
                              <h3 className={styles.carousel_title}>{item.title}</h3>
                            </div>;
                          } else {
                            return '';
                          }
                        })}
                      </Carousel>
                    }
                  </div>
                </Col>
                <Col className="gutter-row" span={12}>
                  <div className={` ${styles.home_info_box} ${styles.home_info_box2}`}>
                    <div className={styles.home_info_title2}>
                      <div> 工会动态</div>
                      <span onClick={() => {
                        this.setState({
                          activeKey: 3,
                        });
                        this.handleSearch({
                          type: 32,
                          page: 1,
                          per_page: 30,
                        });
                      }}>更多>></span>
                    </div>
                    <div className={styles.home_info_content}>
                      {this.state.ghdt.map((item, index) => {
                        if (0 < index && index < 9) {
                          return <div key={index} className={styles.home_info_item}>
                            <div className={styles.item_img}>
                              <img src="https://demo.fanpusoft.com/res/themes/Custom_Default/red_list.gif" alt=""/>
                            </div>
                            <div onClick={() => {
                              this.saveRead(item);
                              window.open(`http://${window.location.host}/union_article/${item.id}`);
                            }} className={styles.item_content}
                                 style={{ color: this.state.readList.indexOf(item.id) >= 0 ? 'rgb(117 28 199)' : '' }}>{item.tag &&
                            <span
                              style={{ color: '#fe4444' }}>[{item.tag}] </span>} {item.title}
                            </div>
                            <div className={styles.item_data}>{item.date}</div>
                          </div>;
                        } else {
                          return '';
                        }
                      })}
                      {
                        this.state.ghdt.length === 0 &&
                        <div className={styles.home_info_content}>
                          <div className={styles.empty}>
                            <Empty/>
                          </div>
                        </div>
                      }


                    </div>
                  </div>
                </Col>
                <Col className="gutter-row" span={8}>
                  <div className={` ${styles.home_info_box} ${styles.home_info_box2}`}>
                    <div className={styles.home_info_title2}>
                      <div> 政策法规</div>
                      <span onClick={() => {
                        this.setState({
                          activeKey: 3,
                        });
                      }}>更多>></span>
                    </div>
                    <div className={styles.home_info_content}>
                      {this.state.zcfg.map((item, index) => {
                        if (index < 8) {
                          return <div key={index} className={styles.home_info_item}>
                            <div className={styles.item_img}>
                              <img src="https://demo.fanpusoft.com/res/themes/Custom_Default/red_list.gif" alt=""/>
                            </div>
                            <div onClick={() => {
                              this.saveRead(item);
                              window.open(`http://${window.location.host}/union_article/${item.id}`);
                            }} className={styles.item_content}
                                 style={{ color: this.state.readList.indexOf(item.id) >= 0 ? 'rgb(117 28 199)' : '' }}>{item.tag &&
                            <span
                              style={{ color: '#fe4444' }}>[{item.tag}] </span>} {item.title}
                            </div>
                            <div className={styles.item_data}>{item.date}</div>
                          </div>;
                        } else {
                          return '';
                        }
                      })}
                    </div>
                    {
                      this.state.zcfg.length === 0 &&
                      <div className={styles.home_info_content}>
                        <div className={styles.empty}>
                          <Empty/>
                        </div>
                      </div>
                    }
                  </div>
                </Col>
                <Col className="gutter-row" span={8}>
                  <div className={` ${styles.home_info_box} ${styles.home_info_box2}`}>
                    <div className={styles.home_info_title2}>
                      <div> 职工培训</div>
                      <span onClick={() => {
                        this.setState({
                          activeKey: 3,
                        });
                      }}>更多>></span>
                    </div>
                    <div className={styles.home_info_content}>
                      {this.state.zgpx.map((item, index) => {
                        if (index < 8) {
                          return <div key={index} className={styles.home_info_item}>
                            <div className={styles.item_img}>
                              <img src="https://demo.fanpusoft.com/res/themes/Custom_Default/red_list.gif" alt=""/>
                            </div>
                            <div onClick={() => {
                              this.saveRead(item);
                              window.open(`http://${window.location.host}/union_article/${item.id}`);
                            }} className={styles.item_content}
                                 style={{ color: this.state.readList.indexOf(item.id) >= 0 ? 'rgb(117 28 199)' : '' }}>{item.tag &&
                            <span
                              style={{ color: '#fe4444' }}>[{item.tag}] </span>} {item.title}
                            </div>
                            <div className={styles.item_data}>{item.date}</div>
                          </div>;
                        } else {
                          return '';
                        }
                      })}
                    </div>
                    {
                      this.state.zgpx.length === 0 &&
                      <div className={styles.home_info_content}>
                        <div className={styles.empty}>
                          <Empty/>
                        </div>
                      </div>
                    }
                  </div>
                </Col>
                <Col className="gutter-row" span={8}>
                  <div className={` ${styles.home_info_box} ${styles.home_info_box2}`}>
                    <div className={styles.home_info_title2}>
                      <div> 劳模工匠</div>
                      <span onClick={() => {
                        this.setState({
                          activeKey: 3,
                        });
                      }}>更多>></span>
                    </div>
                    <div className={styles.home_info_content}>
                      {this.state.lmgj.map((item, index) => {
                        if (index < 3) {
                          return <div key={index} style={{ display: 'flex', padding: '8px 12px' }}>
                            <div onClick={() => {
                              this.saveRead(item);
                              window.open(`http://${window.location.host}/union_article/${item.id}`);
                            }} style={{
                              cursor: 'pointer',
                              width: '120px',
                              height: 'auto',
                              overflow: 'hidden',
                              marginRight: '10px',
                              borderRadius: '3px',
                            }}>
                              <img style={{ width: '100%', height: '80px' }} src={item.cover_image_path} alt=""/>
                            </div>
                            <div style={{ flex: '1' }}>
                              <h3 onClick={() => {
                                this.saveRead(item);
                                window.open(`http://${window.location.host}/union_article/${item.id}`);
                              }} style={{
                                cursor: 'pointer',
                                width: '100%',
                                overflow: 'hidden',
                                height: '23px',
                                fontWeight: 'bold',
                                marginTop: '2px',
                                color: this.state.readList.indexOf(item.id) >= 0 ? 'rgb(117 28 199)' : '',
                              }}
                              >{item.title}</h3>
                              <Paragraph ellipsis={{ rows: 2 }} style={{ marginBottom: '0px !important' }}>
                                {item.content.replace(regex, '')}
                              </Paragraph>
                            </div>
                          </div>;
                        } else {
                          return '';
                        }
                      })}
                    </div>
                    {
                      this.state.lmgj.length === 0 &&
                      <div className={styles.home_info_content}>
                        <div className={styles.empty}>
                          <Empty/>
                        </div>
                      </div>
                    }
                  </div>
                </Col>
              </Row>
              <div style={{ marginTop: '16px' }}>
                <img style={{ width: '100%', height: 'auto' }} src={union_middle} alt=""/>
              </div>
              <Row gutter={16}>

                <Col className="gutter-row" span={12}>
                  <div className={` ${styles.home_info_box} ${styles.home_info_box2}`}>
                    <div className={styles.home_info_title2}>
                      <div> 典型经验</div>
                      <span onClick={() => {
                        this.setState({
                          activeKey: 3,
                        });
                      }}>更多>></span>
                    </div>
                    <div className={styles.home_info_content}>
                      {this.state.dxjy.map((item, index) => {
                        if (index < 8) {
                          return <div key={index} className={styles.home_info_item}>
                            <div className={styles.item_img}>
                              <img src="https://demo.fanpusoft.com/res/themes/Custom_Default/red_list.gif" alt=""/>
                            </div>
                            <div onClick={() => {
                              this.saveRead(item);
                              window.open(`http://${window.location.host}/union_article/${item.id}`);
                            }} className={styles.item_content}
                                 style={{ color: this.state.readList.indexOf(item.id) >= 0 ? 'rgb(117 28 199)' : '' }}>{item.tag &&
                            <span
                              style={{ color: '#fe4444' }}>[{item.tag}] </span>} {item.title}
                            </div>
                            <div className={styles.item_data}>{item.date}</div>
                          </div>;
                        } else {
                          return '';
                        }
                      })}
                    </div>
                    {
                      this.state.dxjy.length === 0 &&
                      <div className={styles.home_info_content}>
                        <div className={styles.empty}>
                          <Empty/>
                        </div>
                      </div>
                    }
                  </div>
                </Col>
                <Col className="gutter-row" span={12}>
                  <div className={` ${styles.home_info_box} ${styles.home_info_box2}`}>
                    <div className={styles.home_info_title2}>
                      <div> 民主管理</div>
                      <span onClick={() => {
                        this.setState({
                          activeKey: 3,
                        });
                      }}>更多>></span>
                    </div>
                    <div className={styles.home_info_content}>
                      {this.state.mzgl.map((item, index) => {
                        if (index < 8) {
                          return <div key={index} className={styles.home_info_item}>
                            <div className={styles.item_img}>
                              <img src="https://demo.fanpusoft.com/res/themes/Custom_Default/red_list.gif" alt=""/>
                            </div>
                            <div onClick={() => {
                              this.saveRead(item);
                              window.open(`http://${window.location.host}/union_article/${item.id}`);
                            }} className={styles.item_content}
                                 style={{ color: this.state.readList.indexOf(item.id) >= 0 ? 'rgb(117 28 199)' : '' }}>{item.tag &&
                            <span
                              style={{ color: '#fe4444' }}>[{item.tag}] </span>} {item.title}
                            </div>
                            <div className={styles.item_data}>{item.date}</div>
                          </div>;
                        } else {
                          return '';
                        }
                      })}
                    </div>
                    {
                      this.state.mzgl.length === 0 &&
                      <div className={styles.home_info_content}>
                        <div className={styles.empty}>
                          <Empty/>
                        </div>
                      </div>
                    }
                  </div>
                </Col>
              </Row>
            </div>
            <div style={{
              marginTop: '16px',
              display: 'flex',
              color: '#233',
              overflow: 'hidden',
              margin: '0 10px',
              textAlign: 'center',
              fontSize: '14px',
            }}>
              <div style={{ flex: 1, margin: '0 5px' }}>
                <img onClick={() => {
                  window.open(`https://www.acftu.org/`);
                }} src={link1} alt="" style={{ width: '100%', height: '80px', cursor: 'pointer' }}/>
                中华全国总工会
              </div>
              <div style={{ flex: 1, margin: '0 5px' }}>
                <img onClick={() => {
                  window.open(`http://www.xjzgh.org.cn/`);
                }} src={link2} alt="" style={{ width: '100%', height: '80px', cursor: 'pointer' }}/>
                新疆维吾尔自治区总工会
              </div>
              <div style={{ flex: 1, margin: '0 5px' }}>
                <img onClick={() => {
                  window.open(`https://www.afwtu.org/?7OkeOa4k=qArjqGq1lfE1lfE1l9Exb5rfWTIE9Ro2y6wpoyZZ.3aqqqqqqqqqqqqqlG`);
                }} src={link3} alt="" style={{ width: '100%', height: '80px', cursor: 'pointer' }}/>
                中国农林水利气象总工会
              </div>
              <div style={{ flex: 1, margin: '0 5px' }}>
                <img onClick={() => {
                  window.open(`http://www.people.com.cn`);
                }} src={link4} alt="" style={{ width: '100%', height: '80px', cursor: 'pointer' }}/>
                人民网
              </div>
              <div style={{ flex: 1, margin: '0 5px' }}>
                <img onClick={() => {
                  window.open(`http://www.women.org.cn`);
                }} src={link5} alt="" style={{ width: '100%', height: '80px', cursor: 'pointer' }}/>
                中华全国妇女联合会
              </div>
            </div>
            <div style={{textAlign:'center',marginTop:'10px'}}>本页已阅读 : {this.state.counters}次</div>
          </div>
        }
        {
          this.state.activeKey === 2 &&
          <div style={{ padding: '15px', display: 'flex' }}>
            <div style={{ flex: '1', paddingRight: '10px' }}>
              <h3 style={{ fontWeight: 'bold', marginBottom: '25px' }}>当前位置 : 组织结构</h3>
              <div style={{
                paddingLeft: '10px',
                borderTop: '1px solid #ccc',
                fontSize: '16px',
                color: '#111',
                height: '40px',
                lineHeight: '40px',
              }}>
                <span style={{ fontWeight: 'bold', marginRight: '10px' }}></span> 党组成员，工会主席
              </div>
              <div style={{
                paddingLeft: '10px',
                borderTop: '1px solid #ccc',
                fontSize: '16px',
                color: '#111',
                height: '40px',
                lineHeight: '40px',
              }}>
                <span style={{ fontWeight: 'bold', marginRight: '10px' }}>李 明</span> 女工委员
              </div>
              <div style={{
                paddingLeft: '10px',
                borderTop: '1px solid #ccc',
                fontSize: '16px',
                color: '#111',
                height: '40px',
                lineHeight: '40px',
              }}>
                <span style={{ fontWeight: 'bold', marginRight: '10px' }}>张 蕾</span> 组织委员
              </div>
              <div style={{
                paddingLeft: '10px',
                borderTop: '1px solid #ccc',
                fontSize: '16px',
                color: '#111',
                height: '40px',
                lineHeight: '40px',
              }}>
                <span style={{ fontWeight: 'bold', marginRight: '10px' }}>热孜万古丽·白克热</span> 经审委员主任
              </div>
              <div style={{
                paddingLeft: '10px',
                borderTop: '1px solid #ccc',
                fontSize: '16px',
                color: '#111',
                height: '40px',
                lineHeight: '40px',
              }}>
                <span style={{ fontWeight: 'bold', marginRight: '10px' }}>史芳梅</span> 经审委员
              </div>
              <div style={{
                paddingLeft: '10px',
                borderTop: '1px solid #ccc',
                fontSize: '16px',
                color: '#111',
                height: '40px',
                lineHeight: '40px',
              }}>
                <span style={{ fontWeight: 'bold', marginRight: '10px' }}>早日古丽·艾合买提</span> 文体委员
              </div>
              <div style={{
                paddingLeft: '10px',
                borderTop: '1px solid #ccc',
                fontSize: '16px',
                color: '#111',
                height: '40px',
                lineHeight: '40px',
              }}>
                <span style={{ fontWeight: 'bold', marginRight: '10px' }}>李江红</span> 宣传委员
              </div>
            </div>
            <div style={{ width: '230px' }}>
              <img src={union_right} style={{ width: '100%' }} alt=""/>
            </div>

          </div>
        }
        {
          this.state.activeKey === 3 &&
          <div style={{ padding: '15px', display: 'flex' }}>
            <div style={{ flex: '1' }}>
              <h3 style={{ fontWeight: 'bold' }}>当前位置 : 工会动态</h3>
              {this.state.ghdt2.data.map((item, index) => {
                return <div key={index} className={styles.home_info_item}
                            style={{ paddingLeft: '0', paddingRight: '10px' }}>
                  <div className={styles.item_img}>
                    <img src="https://demo.fanpusoft.com/res/themes/Custom_Default/red_list.gif" alt=""/>
                  </div>
                  <div onClick={() => {
                    this.saveRead(item);
                    window.open(`http://${window.location.host}/union_article/${item.id}`);
                  }} className={styles.item_content}
                       style={{ color: this.state.readList.indexOf(item.id) >= 0 ? 'rgb(117 28 199)' : '' }}>{item.tag &&
                  <span
                    style={{ color: '#fe4444' }}>[{item.tag}] </span>} {item.title}
                  </div>
                  <div className={styles.item_data}>{item.date}</div>
                </div>;
              })}
              {
                this.state.ghdt2.data.length === 0 &&
                <div className={styles.home_info_content}>
                  <div className={styles.empty}>
                    <Empty/>
                  </div>
                </div>
              }
              <div className="table-pagination">
                <MyPagination style={{ textAlign: 'center', marginTop: '10px' }} searchCondition={{ type: 32 }}
                              meta={this.state.ghdt2.meta} handleSearch={this.handleSearch}/>
              </div>
            </div>
            <div style={{ width: '230px' }}>
              <img src={union_right} style={{ width: '100%' }} alt=""/>
            </div>

          </div>
        }
        {
          this.state.activeKey === 4 &&
          <div style={{ padding: '15px', display: 'flex' }}>
            <div style={{ flex: '1' }}>
              <h3 style={{ fontWeight: 'bold' }}>当前位置 : 政策法规</h3>
              {this.state.zcfg2.data.map((item, index) => {
                return <div key={index} className={styles.home_info_item}
                            style={{ paddingLeft: '0', paddingRight: '10px' }}>
                  <div className={styles.item_img}>
                    <img src="https://demo.fanpusoft.com/res/themes/Custom_Default/red_list.gif" alt=""/>
                  </div>
                  <div onClick={() => {
                    this.saveRead(item);
                    window.open(`http://${window.location.host}/union_article/${item.id}`);
                  }} className={styles.item_content}
                       style={{ color: this.state.readList.indexOf(item.id) >= 0 ? 'rgb(117 28 199)' : '' }}>{item.tag &&
                  <span
                    style={{ color: '#fe4444' }}>[{item.tag}] </span>} {item.title}
                  </div>
                  <div className={styles.item_data}>{item.date}</div>
                </div>;
              })}
              {
                this.state.zcfg2.data.length === 0 &&
                <div className={styles.home_info_content}>
                  <div className={styles.empty}>
                    <Empty/>
                  </div>
                </div>
              }
              <div className="table-pagination">
                <MyPagination style={{ textAlign: 'center', marginTop: '10px' }} searchCondition={{ type: 33 }}
                              meta={this.state.zcfg2.meta} handleSearch={this.handleSearch}/>
              </div>
            </div>
            <div style={{ width: '230px' }}>
              <img src={union_right} style={{ width: '100%' }} alt=""/>
            </div>

          </div>
        }
        {
          this.state.activeKey === 5 &&
          <div style={{ padding: '15px', display: 'flex' }}>
            <div style={{ flex: '1' }}>
              <h3 style={{ fontWeight: 'bold' }}>当前位置 : 职工培训</h3>
              {this.state.zgpx2.data.map((item, index) => {
                return <div key={index} className={styles.home_info_item}
                            style={{ paddingLeft: '0', paddingRight: '10px' }}>
                  <div className={styles.item_img}>
                    <img src="https://demo.fanpusoft.com/res/themes/Custom_Default/red_list.gif" alt=""/>
                  </div>
                  <div onClick={() => {
                    this.saveRead(item);
                    window.open(`http://${window.location.host}/union_article/${item.id}`);
                  }} className={styles.item_content}
                       style={{ color: this.state.readList.indexOf(item.id) >= 0 ? 'rgb(117 28 199)' : '' }}>{item.tag &&
                  <span
                    style={{ color: '#fe4444' }}>[{item.tag}] </span>} {item.title}
                  </div>
                  <div className={styles.item_data}>{item.date}</div>
                </div>;
              })}
              {
                this.state.zgpx2.data.length === 0 &&
                <div className={styles.home_info_content}>
                  <div className={styles.empty}>
                    <Empty/>
                  </div>
                </div>
              }
              <div className="table-pagination">
                <MyPagination style={{ textAlign: 'center', marginTop: '10px' }} searchCondition={{ type: 34 }}
                              meta={this.state.zgpx2.meta} handleSearch={this.handleSearch}/>
              </div>
            </div>
            <div style={{ width: '230px' }}>
              <img src={union_right} style={{ width: '100%' }} alt=""/>
            </div>

          </div>
        }
        {
          this.state.activeKey === 6 &&
          <div style={{ padding: '15px', display: 'flex' }}>
            <div style={{ flex: '1' }}>
              <h3 style={{ fontWeight: 'bold' }}>当前位置 : 劳模工匠</h3>
              {this.state.lmgj2.data.map((item, index) => {
                return <div key={index} style={{ display: 'flex', padding: '8px 12px' }}>
                  <div onClick={() => {
                    this.saveRead(item);
                    window.open(`http://${window.location.host}/union_article/${item.id}`);
                  }} style={{
                    cursor: 'pointer',
                    width: '120px',
                    height: 'auto',
                    overflow: 'hidden',
                    marginRight: '10px',
                    borderRadius: '3px',
                  }}>
                    <img style={{ width: '100%', height: '80px' }} src={item.cover_image_path} alt=""/>
                  </div>
                  <div style={{ flex: '1' }}>
                    <h3 onClick={() => {
                      this.saveRead(item);
                      window.open(`http://${window.location.host}/union_article/${item.id}`);
                    }} style={{
                      cursor: 'pointer',
                      width: '100%',
                      overflow: 'hidden',
                      height: '23px',
                      fontWeight: 'bold',
                      marginTop: '2px',
                      color: this.state.readList.indexOf(item.id) >= 0 ? 'rgb(117 28 199)' : '',
                    }}
                    >{item.title}</h3>
                    <Paragraph ellipsis={{ rows: 2 }} style={{ marginBottom: '0px !important' }}>
                      {item.content.replace(regex, '')}
                    </Paragraph>
                  </div>
                </div>;
              })}
              {
                this.state.lmgj2.data.length === 0 &&
                <div className={styles.home_info_content}>
                  <div className={styles.empty}>
                    <Empty/>
                  </div>
                </div>
              }
              <div className="table-pagination">
                <MyPagination style={{ textAlign: 'center', marginTop: '10px' }} searchCondition={{ type: 35 }}
                              meta={this.state.lmgj2.meta} handleSearch={this.handleSearch}/>
              </div>
            </div>
            <div style={{ width: '230px' }}>
              <img src={union_right} style={{ width: '100%' }} alt=""/>
            </div>

          </div>
        }
        {
          this.state.activeKey === 7 &&
          <div style={{ padding: '15px', display: 'flex' }}>
            <div style={{ flex: '1' }}>
              <h3 style={{ fontWeight: 'bold' }}>当前位置 : 典型经验</h3>
              {this.state.dxjy2.data.map((item, index) => {
                return <div key={index} className={styles.home_info_item}
                            style={{ paddingLeft: '0', paddingRight: '10px' }}>
                  <div className={styles.item_img}>
                    <img src="https://demo.fanpusoft.com/res/themes/Custom_Default/red_list.gif" alt=""/>
                  </div>
                  <div onClick={() => {
                    this.saveRead(item);
                    window.open(`http://${window.location.host}/union_article/${item.id}`);
                  }} className={styles.item_content}
                       style={{ color: this.state.readList.indexOf(item.id) >= 0 ? 'rgb(117 28 199)' : '' }}>{item.tag &&
                  <span
                    style={{ color: '#fe4444' }}>[{item.tag}] </span>} {item.title}
                  </div>
                  <div className={styles.item_data}>{item.date}</div>
                </div>;
              })}
              {
                this.state.dxjy2.data.length === 0 &&
                <div className={styles.home_info_content}>
                  <div className={styles.empty}>
                    <Empty/>
                  </div>
                </div>
              }
              <div className="table-pagination">
                <MyPagination style={{ textAlign: 'center', marginTop: '10px' }} searchCondition={{ type: 36 }}
                              meta={this.state.dxjy2.meta} handleSearch={this.handleSearch}/>
              </div>
            </div>
            <div style={{ width: '230px' }}>
              <img src={union_right} style={{ width: '100%' }} alt=""/>
            </div>

          </div>
        }
        {
          this.state.activeKey === 8 &&
          <div style={{ padding: '15px', display: 'flex' }}>
            <div style={{ flex: '1' }}>
              <h3 style={{ fontWeight: 'bold' }}>当前位置 : 民主管理</h3>
              {this.state.mzgl2.data.map((item, index) => {
                return <div key={index} className={styles.home_info_item}
                            style={{ paddingLeft: '0', paddingRight: '10px' }}>
                  <div className={styles.item_img}>
                    <img src="https://demo.fanpusoft.com/res/themes/Custom_Default/red_list.gif" alt=""/>
                  </div>
                  <div onClick={() => {
                    this.saveRead(item);
                    window.open(`http://${window.location.host}/union_article/${item.id}`);
                  }} className={styles.item_content}
                       style={{ color: this.state.readList.indexOf(item.id) >= 0 ? 'rgb(117 28 199)' : '' }}>{item.tag &&
                  <span
                    style={{ color: '#fe4444' }}>[{item.tag}] </span>} {item.title}
                  </div>
                  <div className={styles.item_data}>{item.date}</div>
                </div>;
              })}
              {
                this.state.mzgl2.data.length === 0 &&
                <div className={styles.home_info_content}>
                  <div className={styles.empty}>
                    <Empty/>
                  </div>
                </div>
              }
              <div className="table-pagination">
                <MyPagination style={{ textAlign: 'center', marginTop: '10px' }} searchCondition={{ type: 37 }}
                              meta={this.state.mzgl2.meta} handleSearch={this.handleSearch}/>
              </div>
            </div>
            <div style={{ width: '230px' }}>
              <img src={union_right} style={{ width: '100%' }} alt=""/>
            </div>

          </div>
        }
        {
          this.state.activeKey === 9 &&
          <div style={{ padding: '15px', display: 'flex' }}>
            <div style={{ flex: '1', paddingRight: '10px' }}>
              <h3 style={{ fontWeight: 'bold' }}>当前位置 : 意见征集</h3>
              <div>
                <div style={{
                  textIndent: '2em', fontSize: '16px', background: '#efefef', borderRadius: '5px', padding: '15px',
                  lineHeight: '30px', marginTop: '20px', color: '#222',
                }}>欢迎访问万泉工会网站。如果你对我们的工作有什么建议或意见，欢迎提出宝贵意见建议。
                  我们会认真研究每一条意见建议，进一步改进我们工作。
                </div>
              </div>
              <div style={{ marginTop: '20px', width: '80%', margin: '20px auto' }}>
                <Form onSubmit={this.handleSubmit}>
                  <FormItem
                    {...formItemLayoutWithLabel}
                    label={(
                      <span>
               姓 名
            </span>
                    )}
                  >
                    {getFieldDecorator('name', {})(
                      <Input allowClear/>,
                    )}
                  </FormItem>
                  <FormItem
                    {...formItemLayoutWithLabel}
                    label={(
                      <span>
               联系电话
            </span>
                    )}
                  >
                    {getFieldDecorator('telephone', {})(
                      <Input allowClear/>,
                    )}
                  </FormItem>
                  <FormItem
                    {...formItemLayoutWithLabel}
                    label={(
                      <span>
              电子邮箱
            </span>
                    )}
                  >
                    {getFieldDecorator('email', {})(
                      <Input allowClear/>,
                    )}
                  </FormItem>
                  <FormItem
                    {...formItemLayoutWithLabel}
                    label={(
                      <span>
              内       容
            </span>
                    )}
                  >
                    {getFieldDecorator('content', {
                      initialValue: '',
                      rules: [{ required: true, message: '请输入内容' }],
                    })(
                      <TextArea allowClear rows={3}/>,
                    )}
                  </FormItem>
                  <div style={{ textAlign: 'center' }}
                  >
                    <Button type={'danger'} style={{ margin: '0 auto' }} onClick={() => {
                      const that = this;
                      const formValues = this.props.form.getFieldsValue();
                      request(`/message_boards`, {
                        method: 'POST',
                        data: {
                          ...formValues,
                        },
                      }).then((response) => {
                        if (response.status === 200) {
                          message.success('提交留言成功')
                          const { form } = that.props;
                          form.resetFields();
                        }
                      });

                    }}>提 交</Button>
                  </div>
                </Form>
              </div>
            </div>
            <div style={{ width: '230px' }}>
              <img src={union_right} style={{ width: '100%' }} alt=""/>
            </div>



          </div>
        }
      </div>
    </div>;


  }
}

const AddPoliciesFormWrap = Form.create()(BasicList);
export default AddPoliciesFormWrap;
